<template>
  <basic-container>
    <div class="header">
      <TitleComponent mainTitle="团队概览"/>
      <el-button text type="primary" @click="router.push('/index')">主页</el-button>
    </div>
    <div class="crud_content">
      <avue-crud :option="option"
                 :table-loading="crudData.loading"
                 :data="crudData.data"
                 @row-save="rowSave"
                 :page.sync="crudData.page"
                 v-model="crudData.form"
                 ref="crud"
                 @selection-change="selectionChange"
                 @refresh-change="refreshChange"
                 @search-change="searchChange"
                 @search-reset="searchReset"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @on-load="onLoad"
      >
        <!--        <template #menu-left>-->
        <!--          <el-button type="danger" v-if="crudData.deleteFlag" icon="el-icon-delete" @click="rowDelete">批量删除-->
        <!--          </el-button>-->
        <!--        </template>-->
      </avue-crud>
    </div>
    <el-dialog v-model="crudData.confirmDeleteVisible" append-to-body title="" width="440" destroy-on-close
               center class="custom-dialog">
      <div class="swal2-header">
        <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
        <div class="swal2_fs">确认删除？</div>
      </div>
      <div class="swal2_he">ID - {{ crudData.indexId }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm">
            确认
          </el-button>
          <el-button class="btn" type="" @click="handleDeleteCancel">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>

  </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import {teamPage,pullDown} from '@/api/user'
import {reactive} from 'vue';
import TitleComponent from '@/components/title/index.vue';
import BasicContainer from "@/components/basic-container/main.vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import {onMounted} from "vue";

const router = useRouter();
let option: any = reactive({
  rowKey: 'uniqueId',
  height: 'auto',
  calcHeight: 90,
  searchShow: true,
  searchMenuSpan: 5,
  searchMenuPosition: 'right',
  tip: true,
  border: true,
  index: false,
  viewBtn: false,
  editBtn: false,
  delBtn: false,
  addBtn: false,
  gridBtn: true,
  dialogWidth: '40%',
  menuFixed: 'right',
  labelWidth: 110,
  menu: false,
  selection: false,
  saveBtnText: '保存',
  refreshBtn: true, // 刷新按钮
  columnBtn: true,
  searchShowBtn: false,
  indexWidth: 60,
  column: [
    {
      label: "编号",
      prop: "id",
      search: true,
      // type:'upload',
      sortable: true,
      span: 24,
    },
    {
      label: "账号",
      prop: "mobilePhone",
      search: true,
      span: 24,
    },
    {
      label: "直推",
      prop: "directSubordinatesCount",
      span: 24,
    },
    {
      label: "VIP等级",
      prop: "vipLevel",
      span: 24,
      type: 'select',
      dicData: []
    },
    {
      label: "首次升级时间",
      prop: "firstUpgradeTime",
      span: 24,
      display: false
    },
    {
      label: "Vip到期时间",
      prop: "vipExpirationTime",
      span: 24,
      display: false
    },
    {
      label: "创建时间",
      prop: "createTime",
      span: 24,
      display: false
    },
    {
      label: '创建时间',
      prop: "createTime",
      hide: true,
      span: 24,
      disabled: true,
      type: "datetime",
      value: new Date()
    },
  ]
})
let crudData: any = reactive({
  loadingSubmit: false,
  loadingSave: false,
  deleteFlag: false,
  confirmDeleteVisible: false,
  index_unit: [],
  loading: true,
  query: {},
  selectList: [],
  indexId: '',
  active: 1,
  page: {
    pageSize: 10,
    currentPage: 1,
    total: 0
  },
  filedArr: [],
  data: []
})

onMounted(() => {
  let vipDicData = option.column.find(item => item.prop === 'vipLevel')
  console.log(vipDicData)
  pullDown().then(res => {
    vipDicData.dicData = Object.entries(res.data).map(([key, value]) => ({
      label: value,
      value: key
    }));
  })
})
function refreshChange() {
  onLoad(crudData.page);
}

function searchChange(params: any, done: () => void) {
  if (params.createTime && params.createTime.length > 0) {
    params.stanTime = params.createTime[0]
    params.endTime = params.createTime[1]
  }
  delete params.createTime
  crudData.query = params;
  crudData.page.currentPage = 1;
  onLoad(crudData.page, params);
  done();
}

function searchReset() {
  crudData.query = {};
  onLoad(crudData.page);
}

function currentChange(currentPage: any) {
  crudData.page.currentPage = currentPage;
}

function sizeChange(pageSize: any) {
  crudData.page.pageSize = pageSize;
}

function selectionChange(list) {
  crudData.selectList = list
  crudData.deleteFlag = crudData.selectList.length > 0;
}

function rowSave(form, done, loading) {
  done(form);
}

function rowDelete() {
  crudData.indexId = crudData.selectList.map(item => item.index).join(',')
  crudData.confirmDeleteVisible = true
}

function handleDeleteConfirm() {
  (crudData.indexId).then(res => {
    ElMessage.success('操作成功')
    onLoad(crudData.page)
  }).catch(err => {
    ElMessage.error(err)
  })
  crudData.confirmDeleteVisible = false
}

function handleDeleteCancel() {
  crudData.confirmDeleteVisible = false
}
function addUniqueIdToTree(tree) {
  // 辅助函数：生成唯一ID
  function generateUniqueId() {
    return 'id-' + Math.random().toString(36).substr(2, 9);
  }

  // 递归函数：遍历树结构，添加唯一ID
  function traverse(node) {
    node.uniqueId = generateUniqueId();
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => traverse(child));
    }
  }

  // 遍历树的每个根节点
  tree.forEach(node => traverse(node));

  return tree;
}
const onLoad = (page: any, params = {}) => {
  crudData.loading = false;
  teamPage(page.currentPage, page.pageSize, Object.assign(params, crudData.query)).then((res: any) => {
    const Data = res.data;
    crudData.page.total = Data.total;
    crudData.data = addUniqueIdToTree(Data.records) ;
    console.log('aaaaaaaaa', crudData.data );
    
    crudData.loading = false;
  })
}
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 2%;
}

.crud_content {
  width: 100%;
}

.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  zoom: normal;
  border: 0.25em solid transparent;
  border-radius: 50%;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-question {
  border-color: #c9dae1;
  color: #87adbd;
}

.swal2_fs {
  margin: 0 0 0.4em;
  padding: 0;
  font-size: 25px;
  color: #595959;
  text-align: center;
  font-weight: 400 !important;
}

.swal2_he {
  text-align: center;
  color: #545454;
  font-size: 1.125em;
  font-weight: 300;
  line-height: normal;
  word-wrap: break-word;
}

.btn {
  padding: 0.54rem 1.2rem !important;
  height: 34px;
  line-height: 1.2;
  border-radius: 0.2rem;
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
  0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
  color: #fff;
  background-color: #4e9876;
  border-color: #4e9876;
}
</style>
